<template>
  <div class="content">
    <div class="tabel-title">
      <span>{{ $t("page.ODvalue") }}：</span>
    </div>
    <!-- 大表格 -->
    <div
      v-for="(listItem, listIndex) in ItemData.originalData"
      :key="listIndex"
    >
      <div class="overflow">
        <table id="table">
          <tr v-for="(table, key, index) in listItem" :key="index">
            <td class="color-000">
              {{ key !== "time" ? key : $t("page.hole") }}
            </td>
            <td>
              <span v-if="key !== 'time'">
                {{ getConcentration(key) }}
              </span>
              <span class="color-000" v-else>{{ $t("page.label") }} </span>
            </td>
            <td v-for="(iTable, index) in table" :key="index">
              <span v-if="key !== 'time'">{{ iTable }}</span>
              <span class="color-000 timer" v-else>{{ iTable + "s" }}</span>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <!-- 曲线-echarts -->
    <div class="d-flex" style="margin:20px 20px 20px 100px;">
      <el-checkbox-group
        v-model="checkList"
        style="margin-left:20px;"
        @change="checkChange"
      >
        <el-checkbox
          :disabled="checkList.length === 1 && checkList.indexOf('曲线') > -1"
          :label="$t('page.curve')"
        />
        <el-checkbox
          :disabled="checkList.length === 1 && checkList.indexOf('拟合') > -1"
          :label="$t('page.fitting')"
        />
      </el-checkbox-group>
    </div>
    <div :id="`line${uuidC}`" style="width: 80vw; height: 500px;"></div>

    <!-- 柱状图 -->
    <!-- <HistogramVue
      v-if="ItemData.histogramList"
      :id="`his${uuidC}`"
      :data="ItemData.histogramList || {}"
      @shotImg="shotImg(0, $event)"
    ></HistogramVue> -->

    <!-- OD 值 -->
    <!-- <img
      :src="ItemData.imgUrl"
      alt="图片"
      style="width: 600px;height: 400px;"
    /> -->

    <!-- 分子量 -->
    <div class="title-space">
      <span>{{ $t("page.molecular") }}（Da）：</span>
      {{ ItemData.mole }}
    </div>
    <!-- 结果表格 -->
    <ParamTable :paramResult="ItemData.paramResult || {}"></ParamTable>

    <!-- 下载结果表 -->
    <div class="title-space">
      <span>{{ $t("page.calResultes") }}：</span>
      <el-button type="text" @click="downloadExl()" size="mini">{{
        $t("page.export")
      }}</el-button>
    </div>
  </div>
</template>
<script>
import ParamTable from "@/components/ParamTable";
import HistogramVue from "./histogram.vue";
import { getStore } from "@/utils/common";
import { fetchUploadExl } from "@/api/table";
import * as echarts from "echarts";
import { COLORLIST } from "@/utils/variate";

export default {
  props: {
    ItemData: {
      type: Object,
      default: {},
    },
    uuidC: {
      type: String,
      required: true
    },
    isDetailPage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      lang: getStore("spr-lang") || "zh", // 语言类型,
      imgList: [],
      checkList: ["曲线", "拟合"],
      keyList: [],
      lineValues: [],
      xAxisTimes: [],
      myChart: null,
    };
  },
  watch: {
    ItemData: {
      handler() {
        this.setValue();
      },
      deep: true,
      // immediate: true,
    },
  },
  methods: {
    // 表格浓度数据
    getConcentration(key) {
      const i = this.ItemData.hole.findIndex((item) => item === key);
      const concentration = this.ItemData.concentration
      const value = concentration[i] == -1000 || concentration[i] == '-1.0000E+3' ? '' : concentration[i]
      return  concentration && value;
    },

    checkChange(value) {
      this.setValue()
    },

    initChart() {
      this.$nextTick(() => {
        const chartDom = document.getElementById(`line${this.uuidC}`);
        this.myChart = echarts.init(chartDom);
        if (this.myChart) {
          this.myChart.clear()
        }
        let option = {
          title: {
            text: `${this.$t("page.curve")}/${this.$t("page.fitting")}`,
          },
          tooltip: {
            trigger: "axis",
          },
          color: COLORLIST,
          legend: {
            type: "scroll",
            orient: "vertical",
            align: "left",
            right: "0",
            icon: "circle",
            textStyle: {
              fontSize: 20,
            },
            data: this.keyList,
          },
          grid: {
            left: "5%",
            right: "15%",
            bottom: "5%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: "value",
            axisTick: {
              alignWithLabel: true,
            },
            boundaryGap: true,
            name: "Time/s",
            nameLocation: "middle",
            nameTextStyle: {
              fontSize: 22,
              padding: 20,
              color: "#000",
            },
            minorTick: {
              show: true,
            },
            axisLine: {
              onZero: false
            },
            axisLabel: {
              fontSize: 20,
            },
            splitLine: {
              show: false,
            },
            splitArea : {show : false},
            data: this.xAxisTimes,
          },
          yAxis: {
            type: "value",
            splitNumber: 6,
            name: "Relative Response(RU)",
            nameLocation: "middle",
            nameGap: 50,
            minorTick: {
              show: true,
            },
            nameTextStyle: {
              fontSize: 22,
              padding: 10,
              color: "#000",
            },
            axisLabel: {
              fontSize: 20,
            },
            splitLine: {
              show: false,
            },
            splitArea : {show : false},
          },
          series: this.lineValues,
        };

        option && this.myChart.setOption(option, true);

        setTimeout(() => {
          this.imgItem = this.myChart.getConnectedDataURL({
            pixelRatio: 2,  // 放大二倍下载
            backgroundColor: '#fff',
          })
          this.shotImg(0, this.imgItem)
        }, 1000)
      });
    },

    setValue() {
      let myKeyList = []
      let myResultList = []
      if(this.checkList.length >= 2) {
        const { keyList = [], resultList = [] } = this.$setGrapData(
          this.ItemData.lineData || {},
          this.ItemData.fittingData || {}
        );
        myKeyList = keyList
        myResultList = resultList
      } else if(this.checkList.includes('曲线')) {
        const { keyList = [], resultList = [] } = this.$setGrapData(
          this.ItemData.lineData || {}
        );
        myKeyList = keyList
        myResultList = resultList
      } else {
        const { keyList = [], resultList = [] } = this.$setGrapData(
          this.ItemData.fittingData || {}
        );
        myKeyList = keyList
        myResultList = resultList
      }

      // 处理后的数据组
      const arr = [];
      const resultTime = myResultList[0]['time']
      for (const k in myResultList[0]) {
        if (k === "time") break;
        arr.push({
          name: k,
          type: "line",
          data: myResultList[0][k],
          showSymbol: false,
          lineStyle: {
            width: 2.2,
          },
          itemStyle: {
            color: k.includes("拟合") && this.checkList.length >= 2 ? "#000" : "",
          },
          markLine: {
            symbol: 'none',
            lineStyle: {
              normal: {
                color: '#000',
                
              },
            },
            data: this.ItemData.dissociation.map(item => ({xAxis: resultTime[item] || 0})),
            label: {
              fontSize: 20,
            },
          }
        });
      }

      this.keyList = myKeyList
      this.lineValues = arr
      this.xAxisTimes = resultTime
      this.initChart()
    },

    // 点击下载excel
    downloadExl() {
      let lang = this.lang === "zh" ? "CN" : "ENG";
      const href = `${
        process.env.BASE_URL
      }receive/download/excel/1/${lang}/${this.ItemData.uuid}`;
      window.open(href, "_blank");
    },

    // 储存图形图片
    shotImg(i, data) {
      if(this.isDetailPage) return
      this.imgList[i] = data;
      if (this.imgList.length >= 1) {
        this.imgUpLoad();
      }
    },

    // 生成excel
    async imgUpLoad() {
      try {
        await fetchUploadExl({
          uuid: this.ItemData.uuid,
          imgBase64: this.imgList,
        });
      } catch (err) {
        return err;
      }
    },
  },
  components: {
    ParamTable,
    HistogramVue,
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  padding: 20px;
  height: 100%;
}
.tabel-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
#table {
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  td {
    padding: 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #d3d8e3;
    font-size: 14px;
    min-width: 60px;
  }
  tr:first-child {
    background-color: #e5e8ed;
    font-weight: 700;
  }
}
</style>
